<template>
<div class="hiLayout">
    <div    class="Box"             
            v-loading="loading" 
            element-loading-text="loading..." 
            element-loading-background="white">
        <div class="infoBox">
            <p>
                <span>酒店名称</span>
                <span>{{ info?.hotel_name }}</span>
            </p>
            <p>
                <span>酒店类型</span>
                <span>{{ info?.type_name }}</span>
            </p>
            <p>
                <span>负责人</span>
                <span>{{ info?.name }}</span>
            </p>
            <p>
                <span>联系电话</span>
                <span>{{ info?.code }}</span>
            </p>
            <p>
                <span>地址</span>
                <span>{{ info?.city }}</span>
            </p>
            <p>
                <span>详细地址</span>
                <span>{{ info?.address }}</span>
            </p>
            <p class="descBox">
                <span>酒店简介</span>
                <span>{{ info?.introduction }}</span>
            </p>
            <p class="imgsBox">
                <span>酒店图片</span>
                <span>
                    <img v-for="item in imgList" :key="item" :src="'/api/hotel/getImage/' + item">
                </span>
            </p>
            <p class="btnBox">
                <button @click="goChangeInfo">修改酒店信息</button>
            </p>
        </div>
    </div>
</div> 
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue'
import { useUserInfoStore } from '@/store/userInfoState'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { get } from '@/http/axios'
import { getCookies } from '@/utils/cookies'

type infoType = {
    address:string
    city:string     //所在地区
    code:number
    hotel_name:string
    introduction:string
    isRegister:boolean
    name:string
    type:number
    type_name:string
}
const store = useUserInfoStore()
const router = useRouter()
const imgList = ref<Array<number>>([])
let loading = ref<boolean>(true)
const info = ref<infoType>()
const id = ref<number>()
onBeforeMount(() => {
    id.value = store.user?.id?store.user.id:getCookies('id')
    getInfo()
    getImg()
})
function getInfo() {
    loading.value = true
    get('/hotel/getHotel?id=' + id.value).then(res => {
        if (!res.result.isRegister) {
            ElMessage({
                showClose: true,
                message: '检测到您还未注册酒店，先去注册酒店吧',
                type: 'error',
            })
            router.push({ path:'/main/addHotel' })
            return 
        }
        let timer = setTimeout(() => {
            clearTimeout(timer)
            info.value = res.result
            loading.value = false
        },500)
    }).catch(err =>{
        ElMessage.error('加载酒店信息失败 ' + err)
    })
}
function getImg() {
    get('/hotel/getImageUrl?id=' + id.value).then(res => {
        imgList.value = res.result
    })
}
function goChangeInfo(){
    router.push({ path:'/main/addHotel' })
}
</script>

<style lang="scss" scoped>
@media  screen and (min-width: 0) and (max-width: 1400px){
    .Box{
        width: 85%;
    }
}
@media  screen and (min-width: 1400px) and (max-width: 1600px){
    .Box{
        width: 80%;
    }
}
@media  screen and (min-width: 1600px) and (max-width: 100vw){
    .Box{
        width: 60%;
    }
}
.hiLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px;
    @include allBack;
    position: relative;
}
.Box{
    padding: 20px;
    box-sizing: border-box;
    background: white;
    border-radius: 8px;
    @include flexColumnCenter;
    box-shadow: var(--el-box-shadow);
}
.infoBox{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 20px;
    flex-wrap: wrap;
    & p{
        cursor: default;
        min-width: calc(50% - 20px);
        text-align: left;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        position: relative;
        white-space: nowrap;
    }
    & p span:nth-child(1){
        width: 130px;
        @include flexRowCenter;
        background: rgb(52, 152, 219,0.2);
        padding: 10px 0;
        box-sizing: border-box;
        border-radius: 8px;
    }
    & p span:nth-child(2){
        min-width: calc(100% - 140px);
        min-height: 40px;
        font-size: 16px;
        background: rgb(26, 188, 156,0.2);
        color: #222222;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 0 10px;
        display: flex;
        align-items: center;
    }
}
.descBox{
    width: 100% !important;
    align-items: start !important;
    & span:nth-child(2){
        width: calc(100% - 200px);
        white-space: normal;
        line-height: 20px;
        padding: 10px !important;
        box-sizing: border-box;
        border-radius: 8px;
        background: rgb(225, 112, 85,0.5) !important;
    }
}
.imgsBox{
    width: 100% !important;
    align-items: start !important;
    & span:nth-child(2){
        min-height: 40px;
        display: flex;
        justify-content: start;
        align-items: start;
        flex-wrap: wrap;
        gap: 20px;
        width: calc(100% - 200px);
        padding: 20px !important;
        box-sizing: border-box;
        border-radius: 8px;
        background: rgb(225, 112, 85,0.5) !important;
    }
    & span:nth-child(2) img{
        width: calc((100% - 60px) / 4);
        height: 120px;
        border-radius: 8px;
    }
}
.btnBox{
    width: 100% !important;
    justify-content: center !important;
    gap: 20px;
    & button{
        width: 30%;
        border: none;
        color: white;
        background: #3498db;
        outline: none;
    }
    & button:hover{
        background: #2980b9;
    }
}
</style>